<template>
    <van-popup v-model="showPicker" closeable position="bottom" @close="onClose">
        <div class="box">
            <van-search v-model="value" :placeholder="placeholder" @input="onInput" />
            <div class="h">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-cell v-for="(item, i) in list" is-link :key="i" :title="item.partName" @click="select(item)" />
                </van-list>
            </div>
        </div>
    </van-popup>
</template>

<script>
import { Cell, Toast, Search } from 'vant';
export default {
    components: {
        Search
    },
    data() {
        return {
            list: [],  //数据
            loading: false,  //加载中
            finished: false,  //数据加载全部完成
            page: 0,  //页码
            value: "",  //搜索值
            showPicker: false,  //控制弹窗打开
        }
    },
    props: {
        // 提示
        placeholder: {
            type: String,
            default: "请输入搜索关键词"
        }
    },
    methods: {
        // 打开
        open() {
            this.showPicker = true
            this.finished = false
            this.value = ""
            this.init()
        },
        // 关闭
        onClose() {
        },
        // 监听点击选项
        select(item) {
            this.showPicker = false
            this.$emit('change', item)
        },
        // 监听输入框
        onInput() {
            this.init()
        },
        // 上拉加载
        onLoad() {
            this.loading = true
            this.page++
            this.loadData()
        },
        // 初始化数据
        init() {
            this.list = []
            this.page = 0
            this.onLoad();
        },
        // 数据源
        loadData() {
            let params = {
                pageNo: this.page,
                pageSize: 10,
            }
            params.moduleName = this.value
            // 此处修改自己的接口
            postAction('xxxxxxxxxxxxxx', params).then((res) => {
                let data = res.result
                if (res.success) {
                    // 根据返回内容进行修改
                    if (this.page == 1) this.list = []
                    this.list = [...this.list, ...res.result.records]
                    this.loading = false;
                    if (res.result.records.length < 10) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            })
        },
    },


}
</script>

<style scoped lang="less">
.box {
    padding-top: 44px;

    .h {
        height: 400px;
        min-height: 400px;
        padding-bottom: 40px;
        overflow-y: auto;
    }
}
</style>